<template>
    <div>
        <el-button @click="visible = true">弹出框</el-button>
        <Aa :title="'弹出框'" :visible="visible" @click1="updata">
            <template v-slot:body>
                <slot name="body">
                    123
                </slot>
            </template>
            <template v-slot:footer>
                <slot name="footer">
                    <el-button @click="visible=false">取消</el-button>
                    <el-button>确定</el-button>
                </slot>
            </template>


        </Aa>
    </div>
</template>
<script>
import {  ElMessageBox } from 'element-plus'
import { ref, reactive, toRefs } from "vue"
import Aa from "../../components/aa.vue"
export default {
    setup() {
        const data = reactive({
            visible: false
        })
        const updata = (val) => {

           ElMessageBox.confirm("确认关闭？")
                .then(() => {
                    data.visible = false
                })
                .catch(() => { })
        }
        return {
            ...toRefs(data),
            updata
        }
    },
    components: { Aa }
}
</script>
<style lang="scss" scoped>
</style>